import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'
/**
 * 默认zustand只能合并一层对象，多层需要手动处理，使用Immer中间件方便多了·
 * 
 * 注意：如果不进行状态合并，其他状态会丢失。
 * 每次更新都需要手动合并状态，这在实际开发中会变得很繁琐。
 * 
 * immer.js 通过 Proxy 代理对象的所有操作，实现不可变数据的更新。
 * 当对数据进行修改时，immer 会创建一个被修改对象的副本，并在副本上进行修改，
 * 最后返回修改后的新对象，
 * 而原始对象保持不变。这种机制确保了数据的不可变性，同时提供了直观的修改方式
 */
interface Group {
    grounp: {
        one: string
        two: string
    },
    count: number,
    changeGroup: (obj: Group['grounp']) => void,
    changeGroupOne: (data: string) => void,
    changeCount: (count: number) => void
}

export const useImmerStore = create<Group>()(immer((set) => ({
    grounp: {
        one: '第一个',
        two: '第二个'

    },
    count: 0,
    changeGroup: (obj) => {
        set((state) => {
            state.grounp = obj
        })
    },
    changeGroupOne: (data) => {
        set((state) => {
            state.grounp.one = data
        })
    },
    changeCount: (count) => {
        set((state) => {
            state.count = count
        })
    }
})
))